import React, { Component } from 'react'

import { CSSTransition,SwitchTransition } from "react-transition-group";
// 引入样式
import "./css2.css";
import "./Csstransition.css";

class CssTransition2 extends Component {
  constructor(){
    super();
    this.state = {
      state:true
    }
  }
  toggle(){
    console.log('哈哈');
    this.setState({
      state: !this.state.state
    },()=>{
      console.log(this.state.state);
    })
  }
  render(){
    return (
      <div className='main'>
        <SwitchTransition mode='out-in'>
          <CSSTransition
            key={this.state.state ? "Goodbye, world!" : "Hello, world!"}
            addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
            classNames='fade'
          >
            <button onClick={() => this.toggle()}>
              {this.state.state ? "Goodbye, world!" : "Hello, world!"}
            </button>

          </CSSTransition>
        </SwitchTransition>
      </div>

    )
  }
  
}

export default CssTransition2
